<template>
  <div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名">
      <el-input v-model="formInline.userName" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="preAddObject()">添加</el-button>
      <el-button type="success" @click="exportData" icon="el-icon-download">导出数据</el-button>
    </el-form-item>
    <el-form-item>
      <el-upload
        :show-file-list="false"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
        :disabled="importDataDisabled"
        style="display: inline-flex;margin-right: 8px"
        :action="action"
      >
        <el-button
          :disabled="importDataDisabled"
          type="success"
          :icon="importDataBtnIcon"
        >{{importDataBtnText}}</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="200"></el-table-column>
    <el-table-column prop="trueName" label="真实姓名" width="200"></el-table-column>
    <el-table-column prop="userName" label="用户名" width="200"></el-table-column>
    <el-table-column prop="bz" label="备注" width="200"></el-table-column>
    <el-table-column fixed="right" label="操作" width="300">
      <template slot-scope="scope">
        <el-button type="text" @click="preUpdateObject(scope.row)" size="small">编辑</el-button>
        <el-button type="text" @click="delUser(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
    
  </el-table>
  <!-- 分页 -->
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="formInline.pageNum"
    :page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
<!-- 添加修改的模态框 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <input type="hidden" v-model="form.id"/>
    <el-form-item label="用户名" :label-width="formLabelWidth">
      <el-input v-model="form.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.trueName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="代号" :label-width="formLabelWidth">
      <el-input v-model="form.bz" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAndupdObject()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      formInline:{pageNum:1,pageSize:2,userName:''},
      total:0,
      dialogFormVisible:false,
      form: {
        id:'',
        userName:'',
        trueName:'',
        bz:'',
      },
      formLabelWidth: '120px',
      title:'',
      method:'',
      requestUrl:'',
      importDataDisabled: false,
      importDataBtnText: "导入数据",
      importDataBtnIcon: "el-icon-upload2",
      action:""
    }
  },
  mounted(){
    this.getUser();
    this.action="http://localhost:9999/system/ecUser/upLoadExcel?access_token="+localStorage.getItem("access_token");
  },
  methods:{
    //导出数据
    exportData() {
        var url =
          "http://localhost:9999/system/ecUser/downLoadGoodsExcel?pageNum={pageNum}&pageSize={pageSize}&access_token={token}";
        url = url.replace("{pageNum}", this.formInline.pageNum);
        url = url.replace("{pageSize}", this.formInline.pageSize);
        url = url.replace("{token}", localStorage.getItem("access_token"));
        if (this.formInline.userName) {
          url = url + "&userName=" + this.formInline.userName;
        }
        console.log("url:----------------------", url);
        window.open(url, "_parent");
    },
    //导入Excel
    onSuccess(response, file, fileList) {
        console.log("导入成功:{}",response)
        this.importDataBtnText = "导入数据";
        this.importDataBtnIcon = "el-icon-upload2";
        this.importDataDisabled =false;
        this.getUser();
    },
    onError(response, file, fileList) {
        console.log("error----------------->:{}",response);
        alert(response.message);
        this.importDataBtnText = "导入数据";
        this.importDataBtnIcon = "el-icon-upload2";
        this.importDataDisabled =false;
    },
    beforeUpload(response, file, fileList) {
      this.importDataBtnText = "正在导入";
      this.importDataBtnIcon = "el-icon-loading";
      this.importDataDisabled = true;
            
    },
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      this.getUser();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.pageNum=val;
      this.getUser();
      console.log(`当前页: ${val}`);
    },
    getUser(){
      var $this = this;
      this.formInline["access_token"] = localStorage.getItem("access_token")
      this.axios({
        method:'get',
        url: "http://localhost:9999/system/ecUser/userList",
        params:this.formInline
      }).then(function(res){
        console.log("查询列表返回的数据为:{}",res);
        $this.tableData=res.data.obj.list;
        $this.total=res.data.obj.total;
      });
    },
    onSubmit(){
      this.getUser();
    },
    preAddObject(){
      for(var i in this.form){
        this.form[i]=null;
      }
      this.form.id=0;
      this.dialogFormVisible=true;
      this.title="添加页面";
      this.method="post";
      this.requestUrl="http://localhost:9999/system/ecUser/addUser";
    },
    preUpdateObject(row){
      this.dialogFormVisible=true;
      for(var i in this.form){
        this.form[i]=row[i];
      }
      this.title="修改页面";
      this.method="put";
      this.requestUrl="http://localhost:9999/system/ecUser/updUser";
    },
    addAndupdObject(){
      console.log("添加或者修改的数据为:{}",this.form);
      var $this = this;
      this.form["access_token"] = localStorage.getItem("access_token")
      this.axios({
        method:this.method,
        url: this.requestUrl,
        data:this.form
      }).then(function(res){
        if(res.data.code==200){
          $this.$message(res.data.msg);
          $this.dialogFormVisible=false;
          $this.getUser();
        }
      })
    },
    delUser(row){
      var $this = this;
      this.axios({
        method:"delete",
        url: "http://localhost:9999/system/ecUser/delUser",
        data:row
      }).then(function(res){
        if(res.data.code==200){
          $this.$message(res.data.msg);
          $this.dialogFormVisible=false;
          $this.getUser();
        }
      })
    }
  }
}
</script>


